<template>
	<view>
		<view class="searchIcon"></view>
		<view class="search">
			<input id="search" type="text" placeholder="在此输入关键字" v-model="searchText">
			<view class="icon iconfont searchBtn" @tap="searchBtn">&#xe621;</view>
		</view>
		<!-- 实时热搜 -->
		<view class="hot"></view>
		<!-- 组件 -->
		<view class="list">
			<view class="list-item overflow-dot" v-for="(item,i) in list" :key="i" @tap="goList(item)">
				<text class="num">{{i+1}}</text>
				<text class="msg">{{item.title}}</text>
			</view>
		</view>
		<view class="nodata" v-show="list ==  null" @tap="reload"></view>
		<!-- 占位 -->
		<view class="seat"></view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				// 初始化显示热搜
				start:true,
				// 搜索内容
				searchText:"",
				list:[]
			}
		},
		onLoad() {
			this.getData(this.searchText);
		},
		methods: {
			// 点击搜索
			searchBtn(){
				this.getData(this.searchText)
				
					this.start = false;
			},
			reload(){
				this.searchText = "";
				this.start = true;
				this.getData(this.searchText)
			},
			// 跳转详情
			goList(item){
				uni.navigateTo({
					url: './list?item=' + JSON.stringify(item)
				});
			},
			getData(word){
				uni.request({
					url:"http://api.tianapi.com/txapi/rumour/index",
					data:{
						key:"d9a5fe28d47299e04f121b8a909e9e86",
						word:word,
					},
					success: (res) => {
						console.log(res);
						this.list = res.data.newslist
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchIcon {
		width: 200upx;
		height: 160upx;
		background: url(../../static/images/search.png) no-repeat;
		background-size: cover;
		margin: 0 auto;
		margin-top: 90px;
	}

	.search {
		margin-top: 100upx;
		position: relative;

		#search {
			width: 86%;
			height: 80upx;
			border-radius: 6px;
			border: 1px solid #ccc;
			display: block;
			margin: 0 auto;
			text-indent: 20upx;
		}

		.searchBtn {
			position: absolute;
			top: 50%;
			right: 80upx;
			font-size: 44upx;
			transform: translateY(-50%);
		}
	}

	.hot {
		width: 122upx;
		height: 32upx;
		background: url(../../static/images/hot.png) no-repeat;
		background-size: cover;
		margin-top: 18upx;
		margin-left: 6upx;
		margin-top: 68upx;
		margin-left: 48upx;
	}

	.list {
		.list-item {
			height:120upx;
			margin: 0 40upx;
			line-height: 120upx;
			border-bottom: 1px solid #e8e8e8;
			.msg {
				margin-left: 40upx;
			}
		}
	}
	.nodata {
		width: 100%;
		height: 800upx;
		background: url(../../static/images/nodata.jpg);
	}
</style>
